<template>
    <Header :title="address"/>
    <van-address-edit
      :area-list="areaList"
      show-delete
      show-set-default
      show-search-result
      :address-info="addressInfo"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
    />
</template>

<script>
import { onMounted, reactive,toRefs,computed } from 'vue'
import Header from '../../components/Header.vue'
import { useRoute,useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { Toast } from 'vant'

export default {
    components:{ Header },
    setup(){
        const  route = useRoute()
        const  router = useRouter()
        const  store = useStore()

        const data = reactive({
            areaList: {
                province_list: {
                    110000: "广东省",
                    120000: "浙江省",
                },
                city_list: {
                    110100: "广州市",
                    110200: "深圳市",
                    120100: "杭州市",
                    120200: "宁波市",
                },
                county_list: {
                    110101: "天河区",
                    110102: "海珠区",
                    120102: "上城区",
                    130102: "下城区",
                }
            },
             addressInfo: {}
        })

        //页面 默认显示的地址信息：
        const init = ()=>{
            store.state.userAddress.forEach(item=>{
                // Number: 类型装换成数值型
                if(item.id === Number(route.query.id)){
                    data.addressInfo = item
                }
            })
        }

        //address ：新增地址按钮
        const address = computed(()=>{
            return route.query.type === 'add' ? '新增地址' : '编辑地址'
        })
        //挂载
        onMounted(()=>{ init() })

        //保存按钮：//新增 和 编辑
        const onSave = (content)=>{
            if(route.query.type === 'add'){
                store.commit('addaddress', content)
            }else{
                 store.commit('editaddress', content)
            }
            Toast('保存成功')
            setTimeout(()=>{
                router.back()
            },1000)

        }
        //删除按钮：
        const onDelete = (content) => { 
            store.commit('deleteaddress', content)
            Toast('删除成功')
            setTimeout(() => {
                router.back()
            }, 1000)
        }

        return {
            ...toRefs(data), onSave, onDelete,init, address
        }
    }

}
</script>
<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
/deep/ .van-switch--on {
  background-color: #ffc400;
}
</style>